<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>E3</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/own.css" />
		<style type="text/css">
			.head_msg {
				padding-left: 15px;
				height: 30px;
				display: table-cell;
				vertical-align: middle;
			}
			
			.head_title {
				/*background-color: darkblue;*/
				position: relative;
				left: 10px;
				right: 10px;
			}
			
			.cellImg {
				max-width: 70%;
				height: auto;
				vertical-align: middle;
				position: relative;
				left: 5px;
			}
			
			.mui-table-view .mui-table-view-cell {
				background: #f3fcfb;
			}
			
			.mui-table-view .mui-table-view-cell:after {
				left: 0px;
			}
			
			.leftClassCell {
				margin: 0 auto;
				padding-top: 5%;
				width: 30%;
				float: left;
				display: table-cell;
				vertical-align: middle;
			}
			
			.rightClassCell {
				width: 70%;
				float: left;
			}
			
			.headSelect:visited {
				background-color: red;
			}
			
			.downDiv {
				background-color: white;
				height: 50px;
				width: 100%;
				/*网页底部*/
				position: fixed;
				bottom: 0;
			}
			
			.changeNum {
				padding: 0px;
				width: 30px;
				height: 30px;
				font-size: 30px;
			}
			
			.mui-icon.iconfont.icon-xuanze1,
			.mui-icon.iconfont.icon-xuanze {
				font-size: 1.1em;
				color: #41CEA9;
			}
			
			.head_title {
				vertical-align: baseline;
			}
			
			.mui-numbox {
				width: 40%;
				height: 100%;
				padding: 0px;
			}
			
			.mui-numbox [class*=mui-numbox-btn] {
				width: 30%;
				height: 100%;
				font-size: 1em;
				padding-bottom: 0.3em;
			}
			
			.itemName {
				color: black;
				line-height: 1.2em;
			}
			
			.itemfeatures {
				font-size: 0.6em;
				line-height: 0.5em;
				padding-top: 3px;
			}
			
			.price {
				color: #41CEA9;
				padding-top: 0px;
				margin-top: 0px;
			}
		</style>

	</head>

	<body>

		<div class="mui-content">
			<div class="need-login" style="text-align: center; margin-top: 50px;display: none;">
				<span style="color: gray; font-size: 0.9em;">你还没有登录</span>
				<br />
				<button type="button" class="mui-btn own-btn-green" style="margin-top: 10px; padding: 5px 20px;">请登录</button>
			</div>
			<div>
					<div class="mui-content own-content-padding login" id="completeOrder">
				
					<!--<input type="checkbox" />-->
				
				
					
					</div>
					
				<div class="downDiv">

				</div>
			</div>
			<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
			<script src="../js/mui.min.js" charset="UTF-8"></script>
			<script src="../js/own.js" charset="UTF-8"></script>
			<script type="text/javascript" src="../js/wl_ajax.js"></script>
			<script type="text/javascript" charset="UTF-8">
				mui.init({
					swipeBack: false
				});

				var cartSupplierItem = [];
				var cartWebview; //当前购物车webview
				var needlogin; //需要登录的div
				var downDiv = document.querySelector('.downDiv');

				mui.plusReady(function() {
					
					window.addEventListener('refresh',function(){
					//alert(555);
				   plus.webview.currentWebview().reload();
				});
 
					cartWebview = plus.webview.currentWebview();
					needlogin = document.querySelector('.need-login');
					downDiv.style.display = 'none';
					//为登录按钮添加事件
					document.querySelector('.need-login button').addEventListener('tap', function() {
						var title = '登录';
						pushWebView({
							webType: 'newWebview_First',
							id: 'mine/login.html',
							href: 'mine/login.html',
							aniShow: getaniShow(),
							title: "登录",
							isBars: false,
							barsIcon: '',
							extendOptions: {}
						})
					}, false);

					//为页面显示的时候添加监听
					cartWebview.addEventListener('show', function() {
						//判断用户是否已经登录,已经登录就需要去获取购物车列表
						if(localStorage.getItem('user')) {
							//将登录按钮隐藏，并且去获取购物车列表或则更新购物车列表todo
							needlogin.style.display = 'none';

							if(cartSupplierItem.length <= 0) {
								//去获取数据
								initCartData();
							}
						} else {
							//如果退出登录或者没有登录成功这个div将被显示出来。
							needlogin.style.display = 'block';
						}
					}, false);

					//特殊：添加事件接收登录页面成功后发来的消息
					window.addEventListener('loginSuccess', function() {
						//页面成功后，要隐藏登录模块，然后去加载数据返回
						needlogin.style.display = 'none';
						initCartData();
					}, false);

					//退出登录
					window.addEventListener('logout', function() {
						needlogin.style.display = 'block';
						var loginDiv = document.querySelector('.login');
						loginDiv.innerHTML = '';
						//cartSupplierItem = [];
					}, false)
				});

				function addTop() {

					mui('.mui-table-view').on('tap', 'span', function() {
						selectItem(this);
					});

					mui('.table_head').on('tap', 'p.head_msg', function() {
						var span = this.getElementsByTagName('span')[0];
						var isXuanze = selectItem(span);

						var objThis = span;
						var cellImgs = span.parentNode.parentNode.getElementsByClassName('selectImg');
						mui.each(cellImgs, function(index, item) {
							//去除第一个
							if(index >= 1) {
								if(isXuanze) {

									item.className = "mui-icon iconfont icon-xuanze selectImg";
								} else {

									item.className = "mui-icon iconfont icon-xuanze1 selectImg";
								}
							}
						});
					});

					//手动写增加减少
					mui('.mui-numbox').on('tap', '.mui-numbox-btn-minus', function() {
						var inputNumbox = this.nextSibling;
						var num = parseInt(inputNumbox.value);
						if(num > 1) {
							num -= 1;
							inputNumbox.value = '' + num;
						}
					});
					mui('.mui-numbox').on('tap', '.mui-numbox-btn-plus', function() {
						var inputNumbox = this.previousSibling;
						var num = parseInt(inputNumbox.value);
						num += 1;
						inputNumbox.value = '' + num;
					});
				}

				function selectItem(obj) {
					var isXuanze = obj.classList.contains('icon-xuanze1');
					if(isXuanze) {
						obj.className = "mui-icon iconfont icon-xuanze selectImg";
					} else {

						obj.className = "mui-icon iconfont icon-xuanze1 selectImg";
					}
					return isXuanze;
				}

				function initCartData() {

					setHtml();
					addTop();
				}

				function setHtml() {
				
					var loginDiv = document.querySelector('.login');
					var data = {};
					data.accountId = plus.storage.getItem("accountId");
					data.tokenCode = plus.storage.getItem("tokenCode");
					data.isShopCart = 'y';
					//alert(data.accountId)
					//alert(data.tokenCode)
					data.serviceType = '0'; //0：被服务方,1：服务方（两个客户端参数约定）
					data.offset = 0; //从哪一条记录开始
					data.limit = 50; //每一页多少条记录
					mui.ajax(url + 'rest/myOrder', {
						type: "POST",
						data: data,
						timeout: 10000, //超时时间设置为10秒；
						success: function(result) {
							//返回json字符串，转成json对象进行属性获取
						//alert(result)
							//alert(JSON.stringify(result));
							//result =JSON.stringify(result)
							result = JSON.parse(result);
						/*	$("#resultCode").val(result.status);
							$("#resultMsg").val(result.msg);*/
							if(result.status != '0') {
								
								mui.alert(result.msg);
							} else {
									
								var dataTable = result.data;
								//var table = $("#completeOrder");
								//table.empty();
								var tableStr = "";
								//tableStr += '<div class="mui-content own-content-padding">';
								//tableStr += "<thead><th>商品名称</th><th>商品数量</th><th>商品价格</th><th>联系方式</th><th>收货人</th><th>收货地址</th><th>状态</th><th>操作</th></thead>";
								tableStr += '<ul  class="mui-table-view">';

								for(var i = 0; i < dataTable.length; i++) {

									var status;

									if(dataTable[i].paystatus == 'n' && dataTable[i].status != '已取消') {
										status = '待支付';
									} else {
										status = dataTable[i].status;
									}
									//alert(dataTable[i].shipname);
									tableStr += '<li class="mui-table-view-cell">';
									tableStr += '<div class="mui-row" style="margin-top: 5px;">';

									tableStr += '<span class="mui-col-xs-4 serviceDate">' + dataTable[i].serviceDate + '</span>';
									tableStr += '<span class="mui-col-xs-5 productName" style="color: #04BB21;">' + dataTable[i].productName + '</span>';
									tableStr += '<span class="mui-col-xs-2 status">' + status + '</span>';

									tableStr += '</div>';
									tableStr += '<div class="mui-row" style="margin-top: 5px;">';
									tableStr += '<span class="mui-col-xs-1 mui-icon mui-icon-person"></span>';
									tableStr += '<span class="mui-col-xs-3 shipname">';
									tableStr += dataTable[i].shipname;
									tableStr += '</span>';
									tableStr += '<span class="mui-col-xs-6 mui-icon mui-icon-phone Phone" style="font-size:16px">' + dataTable[i].phone + '</span>';
									tableStr += '<span class="mui-col-xs-2 mui-icon mui-icon-arrowright"></span>';
									tableStr += '</div>';
									tableStr += '<div class="mui-row" style="margin-top: 5px;">';
									tableStr += '<span class="mui-col-xs-1 mui-icon mui-icon-location" ></span>';
									tableStr += '<span class="shipaddress">' + dataTable[i].province + " " + dataTable[i].city + " " + dataTable[i].area + " " + dataTable[i].shipaddress + '</span>';
									tableStr += '<p class="orderId" hidden>' + dataTable[i].orderId + '</p>';
									tableStr += '<p class="number" hidden>' + dataTable[i].number + '</p>';
									tableStr += '<p class="productId" hidden>' + dataTable[i].prodcutId + '</p>';
									tableStr += '<p class="pTotal" hidden>' + dataTable[i].pTotal + '</p>';
									tableStr += '<p class="amount" hidden>' + dataTable[i].amount + '</p>';
									tableStr += '<p class="publicMoney" hidden>' + dataTable[i].publicMoney + '</p>';
									tableStr += '<p class="detailId" hidden>' + dataTable[i].detailId + '</p>';
									tableStr += '</div>';

									tableStr += '</li>';
								}
								tableStr += '</ul>';

								if(dataTable.length == 0) {
									tableStr += "<div class='own-left-nav-color' style = 'text-align: center;margin-top: 50px;font-size: 0.9em;'>";
									tableStr += "<span>空空如也</span>";
									tableStr += "<br />";
									tableStr += "<span>你还没有下过订单哦</span>";
									tableStr += "<br />";
									tableStr += "</div>";
								}
								
								
								document.getElementById("completeOrder").innerHTML = tableStr;
							
 
							mui('.mui-table-view').on('tap', '.mui-table-view-cell', function() {
								//var cell = this;
								//alert(11);
								data.serviceDate = $(this).children().children(".serviceDate").text();
								data.productName = $(this).children().children(".productName").text();
								data.servicePerson = $(this).children().children(".shipname").text();
								data.servicePersonPhone = $(this).children().children(".Phone").text();
								data.shipAddress = $(this).children().children(".shipaddress").text().split(" ")[3];
								data.orderId = $(this).children().children(".orderId").text();
								data.status = $(this).children().children(".status").text();
								
								data.numbers=$(this).children().children(".numbers").text();
				
								data.productId = $(this).children().children(".productId").text();
								data.amount = $(this).children().children(".amount").text();
								data.pTotal = $(this).children().children(".pTotal").text();
								data.province = $(this).children().children(".shipaddress").text().split(" ")[0];
								data.city =	$(this).children().children(".shipaddress").text().split(" ")[1];
								data.area = $(this).children().children(".shipaddress").text().split(" ")[2];
								data.publicMoney=$(this).children().children(".publicMoney").text();
								data.detailId=$(this).children().children(".detailId").text();
								data.productId=$(this).children().children(".productId").text();
								
								var dataStr = JSON.stringify(data);
 
								mui.openWindow({
									url: '../mine/myOrder.html',
									id: '../mine/myOrder.html',
									extras: {dataStr:dataStr}
								});
 
							});
								
								
								
								

								loginDiv.innerHTML = tableStr;
							}
							
							
							
							
							
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
						}
					});
				}
			</script>
	</body>

</html>